<template>
	<view class='questioncategory'>
		<view class="choosecategory">
			<view class='titlechoose'>请选择类型</view>
			<view class='itemcategorybox'>
				<block v-for='(item,index) in questionreasonlist' :key='index'>
					<view class='itemcategory' :class="{'activecolor':chooseIndex == index}" @click='choosethis(index)'>{{item.name}}</view>
					
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { askcate} from '@/api/data.js'
	export default {
		data() {
			return {
				chooseIndex:0,
				questionreasonlist:[]
			}
		},
		onLoad() {
			this.getcategory()
		},
		methods: {
			getcategory(){
				askcate().then(res=>{
					if(res.code == 1){
						this.questionreasonlist = res.data
						// this.questionreasonlist = [
						// {id: 1, name: "银行"},
						// {id: 1, name: "银行"},
						// {id: 1, name: "银行"},
						// {id: 1, name: "银行"},
						// {id: 1, name: "银行"}
						// ]
					}else{
						this.$msg(res.msg)
					}
				})
			},
			choosethis(num){
				this.chooseIndex = num
				uni.setStorageSync('choosequestionid',this.questionreasonlist[num].id)
				uni.setStorageSync('choosequestionname',this.questionreasonlist[num].name)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.questioncategory{
		height:100vh;
		width:100vw;
		background-color: #F5F5F5;
	}
	/* 类型选择 */
	.choosecategory{
		width:100%;
		height:auto;
		/* border:1rpx solid red; */
		position:relative;
		/* padding: 0 30rpx; */
		padding: 0 7rpx;
		/* background-color: #FFFFFF; */
	}
	.titlechoose{
		height:100rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 40rpx;
		padding-left: 17rpx;
		line-height: 60rpx;
		width:100%;
	}
	.closeimg{
		height:21rpx;
		width:21rpx;
		position:absolute;
		top:30rpx;
		right:30rpx;
	}
	.itemcategorybox{
		height:auto;
		width:100%;
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-start;
		flex-wrap:wrap;
	}
	.itemcategory{
		width: 164rpx;
		margin: 0 10rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		/* border: 1rpx solid #F5F5F5; */
		background: #FFFFFF;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
	}
	.activecolor{
		border: 1rpx solid #FCB630;
		background: #FFEDCA;
		
	}
</style>
